<template>
  <div>
    <Drawer width="80%" :title="drawer.title" placement="right" :closable="false" v-model="drawer.show">
      <div class="opt-area-02">
        <div class="left-con">
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.first_type" @on-change="getSwUserTypeList(1,{pid: params.first_type})" style="width: 164px" placeholder="一级类型" filterable>
              <Option v-for="(item,index) in userTypeList['type' + 0]" :key="index" :value="item.id" >{{item.name}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.second_type" style="width: 164px" placeholder="二级类型" filterable>
              <Option v-for="(item1,index1) in userTypeList['type' + 1]" :key="index1" :value="item1.id">{{item1.name}}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="姓名" style="width: 164px" v-model="params.name"/>
          </div>
<!--          <div class="input-frame" style="width: 164px">-->
<!--            <Input type="text" placeholder="身份证号" style="width: 164px" v-model="params.cardno"/>-->
<!--          </div>-->
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="联系方式" style="width: 164px" v-model="params.mobile"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Button type="primary" @click="findTableT" >查询</Button>
            <Button type="primary" @click="showAdd" style="margin-left: 2%">添加</Button>
          </div>
        </div>
      </div>
      <Table border :columns="tableColumns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error"  size="small" style="margin-right: 5px" @click="del(row)">删除</Button>
          <Button type="warning"  size="small" style="margin-right: 5px" @click="showUpd(row) " >修改</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page_style">
        <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
              @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
      </Row>
      <Modal v-model="addModal.show" :title="addModal.title" width="500" >
        <Form :model="addModal.info">
          <Row style="margin-bottom: 10px">
            <Col span="7" style="text-align: right;line-height: 35px">一级类型:</Col>
            <Col span="12" offset="1">
              <Select v-model="addModal.info.first_type" @on-change="getSwUserTypeList(1,{pid: addModal.info.first_type},true)">
                <Option v-for="(item,index) in userTypeList['type' + 0]" :key="index" :value="item.id" >{{item.name}}</Option>
              </Select>
            </Col>
          </Row>
          <Row style="margin-bottom: 10px" v-show="userTypeList['type1'].length > 0">
            <Col span="7" style="text-align: right;line-height: 35px">二级类型:</Col>
            <Col span="12" offset="1">
              <Select v-model="addModal.info.second_type" >
                <Option v-for="(item1,index1) in userTypeList['type' + 1]" :key="index1" :value="item1.id">{{item1.name}}</Option>
              </Select>
            </Col>
          </Row>
          <Row style="margin-bottom: 10px">
            <Col span="7" style="text-align: right;line-height: 35px">姓名:</Col>
            <Col span="12" offset="1">
              <Input v-model="addModal.info.name"></Input>
            </Col>
          </Row>
          <Row style="margin-bottom: 10px">
            <Col span="7" style="text-align: right;line-height: 35px">联系方式:</Col>
            <Col span="12" offset="1">
              <Input v-model="addModal.info.mobile"></Input>
            </Col>
          </Row>
          <Row style="margin-bottom: 10px">
            <Col span="7" style="text-align: right;line-height: 35px">所在单位:</Col>
            <Col span="12" offset="1">
              <Input v-model="addModal.info.szdw"></Input>
            </Col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="success" v-if="addModal.type === '1'" @click="addOk">保存</Button>
          <Button type="success" v-if="addModal.type === '2'" @click="updOk">保存</Button>
        </div>
      </Modal>
    </Drawer>
  </div>
</template>

<script>
import {
  addSwUser,
  getSwUserList,
  updateSwUSer,
  deleteSwUser,
  getSwUserTypeList, findResidentialList
} from '@/api/eventlist'
// import { getTruckDriverList, updateTruckDriverCz } from '@/api/yi-qing-fang-kong'

export default {
  name: 'grid-sw-user',
  components: {
  },
  data () {
    return {
      residentialInfo: {},
      addModal: {
        show: false,
        type: '',
        title: '',
        info: { }
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableColumns: [
        {
          type: 'index',
          width: 65,
          title: '序号',
          align: 'center'
        },
        {
          title: '一级类型',
          key: 'first_type_name',
          // width: '',
          align: 'center'
        },
        {
          title: '二级类型',
          key: 'second_type_name',
          // width: '',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          width: '90',
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'mobile',
          // width: '120',
          align: 'center'
        },
        {
          title: '所在单位',
          key: 'szdw',
          // width: '120',
          align: 'center'
        },
        {
          title: '操作',
          width: 200,
          slot: 'action',
          fixed: 'right',
          align: 'center'
        }
      ],
      tableData: [],
      drawer: {
        title: '保障人员清单',
        show: false
      },
      userTypeList: {
        type0: [],
        type1: []
      },
      residentialList: []
    }
  },
  methods: {
    init (e) {
      console.log(e)
      this.residentialInfo = e
      this.params.residential_id = e.id
      this.addModal.info.residential_id = e.id
      this.drawer.show = true
      this.findResidentialList()
      this.getSwUserTypeList(0, { grade: '2' }, false)
      this.findTable()
    },
    findTableT () {
      this.params.pageNo = 1
      this.findTable()
    },
    findTable () {
      getSwUserList(this.params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    findResidentialList () {
      findResidentialList(this.params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.residentialList = data.data
        } else {
          this.error(data)
        }
      })
    },
    showAdd () {
      this.addModal.info = {}
      this.addModal.title = '添加小区'
      this.addModal.type = '1'
      this.addModal.show = true
      this.userTypeList['type' + 1] = []
    },
    addOk () {
      if (!this.addModal.info.first_type) {
        this.error({ errmsg: '请选择一级类型' })
        return
      }
      if (!this.addModal.info.name) {
        this.error({ errmsg: '请填写姓名' })
        return
      }
      if (!this.addModal.info.mobile) {
        this.error({ errmsg: '请填写联系方式' })
        return
      }
      if (this.addModal.info.first_type === '222') {
        if (!this.addModal.info.szdw) {
          this.error({ errmsg: '请填写所在单位' })
          return
        }
      }
      if (this.userTypeList['type1'].length > 0) {
        if (!this.addModal.info.second_type) {
          this.error({ errmsg: '请选择二级类型' })
          return
        }
      } else {
        this.addModal.info.second_type = this.addModal.info.first_type
      }
      this.addModal.info.residential_id = this.residentialInfo.id
      addSwUser(this.addModal.info).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('添加成功')
          this.addModal.show = false
          this.findTable()
        } else {
          this.error(data)
        }
      })
    },
    showUpd (e) {
      console.log(e)
      this.addModal.info = e
      this.addModal.title = '修改人员信息'
      this.getSwUserTypeList(1, { pid: this.addModal.info.first_type }, false)
      this.addModal.type = '2'
      this.addModal.show = true
    },
    updOk () {
      if (!this.addModal.info.first_type) {
        this.error({ errmsg: '请选择一级类型' })
        return
      }
      if (!this.addModal.info.name) {
        this.error({ errmsg: '请填写姓名' })
        return
      }
      if (!this.addModal.info.mobile) {
        this.error({ errmsg: '请填写联系方式' })
        return
      }
      if (this.addModal.info.first_type === '222') {
        if (!this.addModal.info.szdw) {
          this.error({ errmsg: '请填写所在单位' })
          return
        }
      }
      if (this.userTypeList['type1'].length > 0) {
        if (!this.addModal.info.second_type) {
          this.error({ errmsg: '请选择二级类型' })
          return
        }
      } else {
        this.addModal.info.second_type = this.addModal.info.first_type
      }
      updateSwUSer(this.addModal.info).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('修改成功')
          this.addModal.show = false
          this.findTable()
        } else {
          this.error(data)
        }
      })
    },
    del (e) {
      deleteSwUser({ id: e.id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Message.success('删除成功')
          this.addModal.show = false
          this.findTable()
        } else {
          this.error(data)
        }
      })
    },
    getSwUserTypeList (index, e, state) {
      if (state) {
        this.addModal.info.second_type = ''
      }
      if (index === 1) {
        if (e.pid === '' || !e.pid || !e) {
          return
        }
      }
      getSwUserTypeList(e).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.userTypeList['type' + index] = data.data
          console.log(this.userTypeList)
        } else {
          this.error(data)
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.findTable()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTable(this.params.pageNo)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
</style>
